<template>
	<div class="main">
		<div class="fjcolor">
			<div class="borderbot">
				<div class="upload-hd">
					<span class="fjlist">隐患附件</span>
						<div class="imgsmr10" v-for="(item, index) in fileList" :key="index">
							<img class="upload-img" :src="baseUrl + item" />
							
						</div>
				</div>
			</div>
		</div>
		
		<van-field label="检查企业" v-model="data.EnterpriseName" name="title" readonly>
		</van-field>
		<van-field label="整改部门" v-model="data.CorrectiveDeptName"  readonly>
		</van-field>		

		<van-field
			label="隐患描述"
			rows="3"
			autosize
			type="textarea"
			v-model="data.HiddenDangerDesc"
      readonly
		>
		</van-field>
		<van-field
		class="imglist"
			label="整改描述"
			rows="3"
			autosize
			type="textarea"
			v-model="data.CorrectiveDesc"
		>
		</van-field>
		<!-- 图片 -->
		<div class="fjcolor">
			<div class="borderbot">
				<div class="upload-hd">
					<span class="imglist">隐患附件</span>
					<div class="imgs mr-10" v-for="(item, index) in pngList" :key="index">
						<img class="upload-img" :src="baseUrl + item" />
						<div class="delImg" @click="DelImg(index)">
							<img src="@/assets/Images/AppIcon//icon_cancel.png" />
						</div>
					</div>
					<van-uploader
						v-if="pngList.length < 3"
						@oversize="onOversize"
						:after-read="afterRead"
					>
						<img
							class="upload-img"
							src="@/assets/Images/AppIcon/upload_picture.png"
							alt=""
						/>
					</van-uploader>
				</div>
			</div>
		</div>
		
		<div class="bottom-btns">
					<van-button type="warning" class="delete-btn" @click="save(false, 'close')">
						保存
					</van-button>
		</div>
	</div>
</template>

<script>
import { formatDate, getDate } from '@/utils/getDate'
import { mapGetters } from 'vuex'
import { upload } from '@/api/common'
import store from '@/store/index'
import {getUpdate , getUpdatePost } from '@/api/RCfeedblack'
export default {
	
	data() {
		return {
			id: this.$route.query.id,
			data: {
				
			},
			menuList: [],
			mobile: '',
			message: '',
			radio: '1',
			checkbox: false,
			checkboxGroup: [],
			value: '',
			showCalendar: false,
			activeNames: ['1'],
		    fileList: [],
			pngList:[],
			showPopup: false,
			MannerItemPopup: false,
			userId: [],
			show: false,
			Component: '',
			CASNo: '',
		}
	},
	beforeMount () {
		this.data = []

		let title = '编辑整改隐患反馈'
		if (this.id != 0) {
			this.getUpdate()
		} 
		store.commit('updateTitle', title)
	},
	created() {
		

	},
	computed: {
		...mapGetters(['baseUrl', 'CompanyCode', 'roles']),
	},
	activated() {},
	methods: {

		// 上传图片
		afterRead(file) {
			let params = new FormData() //创建form对象
			params.append('file', file.file)
			upload(params)
				.then((res) => {
					res.data.forEach((item) => {
						this.pngList.push(item.FilePath)
					})
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		onOversize(file) {
			Toast('文件大小不能超过 2M')
		},
		// 删除图片
		DelImg(idx) {
			const _this = this
			_this.$dialog
				.confirm({
					title: '询问',
					message: '确定要删除此照片吗？',
				})
				.then(() => {
					_this.pngList.splice(idx, 1)
				})
				.catch(() => {
					// on cancel
				})
		},
		save(Confirm, info){
			if (info) {
				
				if (this.pngList.length == 0) {
					return this.$toast('请上传图片!')
				}
				if(!this.data.CorrectiveDesc){
					return this.$toast('请输入整改描述!')
				}
			}
			this.data.CorrectiveAttachs = this.pngList.join(';');
			getUpdatePost(this.data, Confirm)
					.then((res) => {
						console.log(res, 'res')

						this.loading = false
						if (info == 'info') {
							this.pngList = []
							this.data = {}
							this.data.ID = newform.ID
							return
						}
						setTimeout(() => {
							this.$router.push('/RCfeedback/List')
						}, 500)
					})
					.catch((err) => {
						console.log('err', err)
					})
		},
		

		getUpdate(){
			const param = {
				id: this.id,
			}
			getUpdate(param).then((res) => {
				console.log(res.data, 'res.data')
				this.data = res.data
				if (res.data.Attachs != null && res.data.Attachs != "") {
					this.fileList = res.data.Attachs.split(";");
				}
			})
		},
	},
}
</script>

<style lang="less" scoped>
.col-detail {
	color: #333;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.col-del {
		display: flex;
		align-items: center;
		img {
			width: 15px;
			height: 15px;
			margin-right: 5px;
		}
	}
}
.valueclass {
	color: rgb(0, 195, 224);
}
.dialog-content-text {
	height: auto;
}
.imglist {
	color: #646566;
	font-size: 0.37333rem;
	margin-right: 55px;
}
.fjlist {
	color: #646566;
	font-size: 0.37333rem;
	margin-right: 63px;
}
.imglist::before{
	position: absolute;
    left: 0.21333rem;
    color: #c03131;
    font-size: 0.37333rem;
    content: '*';
}
.upload-hd {
	display: flex;
    padding-top: 10px;
	padding-bottom: 10px;
	.upload-img,
	.imgs {
		position: relative;
		width: 60px;
		height: 60px;
		margin-right: 5px;
	}
	.delImg {
		position: absolute;
		top: -5px;
		right: -5px;
		width: 16px;
		height: 16px;
		img {
			width: 100%;
			height: 100%;
		}
	}
}
.bottom-btns {
	margin-top: 10px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.submit-btn {
		width: 48%;
		height: 35px;
		font-size: 14px;
	}
	.delete-btn {
		width: 100%;
		height: 35px;
		font-size: 14px;
	}
}
.fjcolor {
	background-color: #fff;
}
.borderbot{
	border-bottom: 0.02667rem solid #ebedf0;
	margin: 0 15px;
}
</style>